<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      width="80%"
      align-center
      :show-close="false"
      @close="handleClose"
      @open="handleOpen"
      destroy-on-close
      draggable
    >
      <template #header="{ close }">
        <div class="dialog-header flex justify-between items-center">
          <div>申报查看</div>
          <el-icon class="el-icon--left cursor-pointer" @click="close"
            ><CircleCloseFilled color="#fff"
          /></el-icon>
        </div>
      </template>
      <div class="flex">
        <el-tabs v-model="activeTabName" class="flex-1">
          <el-tab-pane label="项目信息" name="0"></el-tab-pane>
          <el-tab-pane label="项目成员" name="1"></el-tab-pane>
          <el-tab-pane label="项目预算" name="2"></el-tab-pane>
        </el-tabs>
        <el-link
          type="primary"
          v-if="procInsId"
          class="bg-white pr-[10px]"
          @click="checkHistoryModalVisible = true"
          >审核记录</el-link
        >
      </div>
      <ProjectBaseInfo v-if="activeTabName != 0" />
      <ProjectInfo v-if="activeTabName == 0" :detailData="detailData" />
      <ProjectMember v-if="activeTabName == 1" />
      <ProjectBudget v-if="activeTabName == 2" />
      <template #footer>
        <div class="dialog-footer">
          <div class="operate-btns">
            <!-- 判断是否时科研人员并且审核状态是否为暂存或审核不通过 -->
            <el-button
              type="primary"
              @click="handleEdit"
              v-if="verifyRoleType.isKyry() && [-1, 3].includes(Number(checkStatus))"
              >编辑</el-button
            >
            <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
          </div>
        </div>
      </template>
    </el-dialog>
  </div>
  <EditModal ref="editModalRef" />
  <CheckHistoryModal
    v-model="checkHistoryModalVisible"
    :procInsId="procInsId"
    :checker="checker"
    :checkDate="checkDate"
  />
</template>
<script setup>
import CheckHistoryModal from "@/views/project/components/CheckHistoryModal.vue";
import ProjectBaseInfo from "./ProjectBaseInfo.vue";
import ProjectInfo from "./ProjectInfo.vue";
import ProjectMember from "./ProjectMember.vue";
import ProjectBudget from "./ProjectBudget.vue";
import useCommonFetch from "@/hooks/useCommonFetch";
import EditModal from "./EditModal.vue";
import { sbBaseDetail } from "@/api/project/xj/sbxm";
import { verifyRoleType } from "@/utils/main";
/**获取公共下拉数据开始*/
const sexList = useCommonFetch("人员-性别(男女)");
const executivePostList = useCommonFetch("行政职务");
const applierEduDegreeList = useCommonFetch("学位");
const applierTitleList = useCommonFetch("职称");
const researchBaseTypeList = useCommonFetch("所在研究基地类型");
const projectTypeList = useCommonFetch("项目分类（校级）");
const nationalIndustryList = useCommonFetch("国民经济行业");
const technologyActivityList = useCommonFetch("科技活动类型");
const subjectList = useCommonFetch("一级学科");
const unitList = useCommonFetch("成果归属单位");
const allUnitList = useCommonFetch("所有单位");
const memberList = useCommonFetch("成员类型");
provide("sexList", sexList); //性别
provide("executivePostList", executivePostList); //行政职务
provide("applierEduDegreeList", applierEduDegreeList); //学位
provide("applierTitleList", applierTitleList); //职称
provide("researchBaseTypeList", researchBaseTypeList); //所在研究基地类型
provide("projectTypeList", projectTypeList); //项目分类
provide("nationalIndustryList", nationalIndustryList); //国民行业
provide("technologyActivityList", technologyActivityList); //科技活动类型
provide("subjectList", subjectList); //一级学科
provide("unitList", unitList); //所属单位
provide("allUnitList", allUnitList);
provide("memberList", memberList); //成员类型
/**获取公共下拉数据结束 */
const dialogVisible = ref(false);
const activeTabName = ref("0");
const editModalRef = ref();
const operateId = ref(null);
provide("id", operateId);
const checkHistoryModalVisible = ref(false);
const procInsId = ref(null); //流程实例id
const checker = ref("");
const checkDate = ref("");
const checkStatus = ref("");
const detailData = ref({});
//获取申报基础信息
const getBaseDetail = async () => {
  const params = {
    id: operateId.value,
  };
  try {
    const res = await sbBaseDetail(params);
    detailData.value = res.data;
    checker.value = res.data.checker;
    checkDate.value = res.data.checkDate;
    checkStatus.value = res.data.checkState;
    procInsId.value = res.data.processInstanceId;
  } catch (error) {
    console.log(error);
  }
};
//查看申报
const view = (id) => {
  operateId.value = id;
  dialogVisible.value = true;
};
defineExpose({ view });
//点击编辑
const handleEdit = () => {
  dialogVisible.value = false;
  editModalRef.value.edit(operateId.value);
};
const handleOpen = () => {
  getBaseDetail();
};
//关闭弹窗
const handleClose = () => {
  activeTabName.value = "0";
};
</script>

<style scoped lang="scss">
@import url("@/views/project/index.scss");
:deep(.el-tabs__header) {
  padding-left: 10px;
  margin-bottom: 0;
  background: #fff;
}
</style>
